---
menu: 表单项
name: select 选择器
route: /component/formFields/select
---

import { useState } from "react"
import { Playground, Props } from "docz";
import MultipleSelect, { MultiplePropsType } from "./multiple/index";
import SingileSelect, { SinglePropsType } from "./single/index";
import Form from "../../../steps/form";

# Select 下拉选框表单项

表单项内的选择器选项。

## 何时使用
表单内需要设置选择器选项时。<br/>
提供了以下可配置项：
- 单选: 支持下拉选择与单选按钮选择
- 多选: 支持下拉选择与复选框选择

## 如何使用
### 配置化JSON参考
`config`中`fields`为表单项配置信息
```
  fields:[
      /** 单选 */
      {
        label: "单选展示模式",
        field: "mode",
        type: "select_single",
        mode: "radio",
        default: {
          type: "static",
          value: "radio"
        },
        options: {
          from: "manual",
          data: [
            {
              value: "dropdown",
              label: "下拉选框"
            },
            {
              value: "radio",
              label: "单选框"
            },
            {
              value: "button",
              label: "按钮"
            }
          ]
        }
      },
      /** 多选 */
      {
        label: "多选展示模式",
        field: "mode",
        type: "select_multiple",
        mode: "dropdown",
        default: {
          type: "static",
          value: "radio"
        },
        options: {
          from: "manual",
          data: [
              {
                value: "dropdown",
                label: "下拉选框"
              },
              {
                value: "checkbox",
                label: "复选框"
              }
          ]
        }
      },
  ]
```

## 代码演示

### 组件单独调用


### 单选-单选框模式

<Playground>
  <Form layout="horizontal" 
    config={{
      fields: [
        {
          label: "单选展示模式",
          field: "mode",
          type: "select_single",
          mode: "radio",
          default: {
            type: "static",
            value: "radio"
          },
          options: {
            from: "manual",
            data: [
              {
                value: "dropdown",
                label: "下拉选框"
              },
              {
                value: "radio",
                label: "单选框"
              },
              {
                value: "button",
                label: "按钮"
              }
            ]
          }
        }
      ]
    }}
    onSubmit={()=>{}}
    onUnmount={()=>{}}
    onMount={()=>{}}
    ref={(form) => {
      form.willMount()
    }}
  />
</Playground>

### 单选-下拉模式

<Playground>
  <Form layout="horizontal" 
    config={{
      fields: [
        {
          label: "单选展示模式",
          field: "mode",
          type: "select_single",
          mode: "dropdown",
          options: {
            from: "manual",
            data: [
              {
                value: "dropdown",
                label: "下拉选框"
              },
              {
                value: "radio",
                label: "单选框"
              },
              {
                value: "button",
                label: "按钮"
              }
            ]
          },
          }
      ]
    }}
    onSubmit={()=>{}}
    onUnmount={()=>{}}
    onMount={()=>{}}
    ref={(form) => {
      form.willMount()
    }}
  />
</Playground>

### 多选-复选框选择

<Playground>
  <Form layout="horizontal" 
    config={{
      fields: [
        {
          label: "多选展示模式",
          field: "mode",
          type: "select_multiple",
          mode: "checkbox",
          options: {
            from: "manual",
            data: [
              {
                value: "dropdown",
                label: "下拉选框"
              },
              {
                value: "checkbox",
                label: "复选框"
              }
            ]
          }
        }
      ]
    }}
    onSubmit={()=>{}}
    onUnmount={()=>{}}
    onMount={()=>{}}
    ref={(form) => {
      form.willMount()
    }}
  />
</Playground>

### 多选-下拉选择

<Playground>
  <Form layout="horizontal" 
    config={{
      fields: [
        {
          label: "多选展示模式",
          field: "mode",
          type: "select_multiple",
          mode: "dropdown",
          default: {
            type: "static",
            value: "radio"
          },
          options: {
            from: "manual",
            data: [
              {
                value: "dropdown",
                label: "下拉选框"
              },
              {
                value: "checkbox",
                label: "复选框"
              }
            ]
          }
        }
      ]
    }}
    onSubmit={()=>{}}
    onUnmount={()=>{}}
    onMount={()=>{}}
    ref={(form) => {
      form.willMount()
    }}
  />
</Playground>

### 单选-接口数据获取
```
    {
        "label": "应用",
        "field": "projectCode",
        "type": "select_single",
        "options": {
            "from": "interface",
            "api": {
                "url": "http://sentinel.jd.com/project/queryProject",
                "method": "GET",
                "contentType": "json",
                "withCredentials": true,
                "apiResponse": "data.data"
            },
            "response": {
                "root": "data",
                "data": {
                    "type": "list",
                    "keyField": "projectName",
                    "labelField": "projectName"
                }
            },
            "value": 31340
        },
        "multiple": {
            "type": "array"
        },
        "default": {
            "type": "interface"
        }
    }
```
## 单选APIs
 <Props of={SinglePropsType} />

## 多选APIs
 <Props of={MultiplePropsType} />